<template>
  <div class="top">
    <toast ref="toast" />
    <div class="img">
      <img :src="avatar" alt="" @click="to_uindex" />
      <!-- <input 
      class="input"
      type="file" 
      id="touxiang"
      name="photos"
      multiple="multiple"
      accept="image/jpg,image/jpeg,image/png,image/svg"
      @change="getFile($event)"
      >
      <label for="touxiang" class="change">更换头像</label> -->
    </div>
    <div class="top-item">
      <div class="item-top" v-if="nickname">{{ nickname }}</div>
      <div class="item-top" v-else @click="to_user">
        <span>登录</span><span>/</span><span>注册</span>
      </div>
      <div class="item-bottom">
        <p><span>个性签名：</span>{{ signatrue }}</p>
      </div>
    </div>
    <div class="img" @click="to_edit">
      <img src="../../assets/img/Profile/point.svg" alt="" />
    </div>
  </div>
</template>

<script>
import Toast from "../../components/Toast/Toast.vue";

export default {
  name: "Profile",
  components: {
    Toast
  },
  props: {
    path: String
  },
  data() {
    return {};
  },
  created() {},
  mounted() {},
  watch: {},
  computed: {
    userInfo() {
      return (
        this.$store.getters.user || JSON.parse(localStorage.getItem("userInfo"))
      );
    },
    //获取用户_id
    _id() {
      return (this.userInfo && this.userInfo._id) || this.$store.state.user._id;
    },
    //判断用户是否登录
    isLogin() {
      return (this.$store.state.isLogin && this.$store.state.isLogin) || 0;
    },
    //昵称
    nickname() {
      return (
        this.userInfo.nickname ||
        this.$store.getters.user.nickname ||
        this.userInfo.username
      );
    },
    //头像
    avatar() {
      return this.userInfo.avatrt || this.$store.getters.user.avatar
        ? this.$store.getters.user.avatar
        : "../../assets/img/Profile/point.svg";
    },
    //签名
    signatrue() {
      return (
        this.userInfo.signatrue || this.$store.getters.user.signatrue || ""
      );
    }
  },
  methods: {
    to_user() {
      this.$router.push("/login");
    },
    to_edit() {
      // console.log(this.isLogin)
      if (this.isLogin) {
        this.$router.push("/user_edit");
      } else {
        let msg = "请先登录";
        let color = "Orange";
        this.$refs.toast.show(msg, color);
        return;
      }
    },
    to_uindex() {
      if (!this.isLogin) {
        let msg = "请先登录";
        let color = "Orange";
        this.$refs.toast.show(msg, color);
        return;
      } else {
        // console.log(this._id)
        this.$router.push("/uindex/" + this._id);
      }
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.top {
  /* overflow: hidden; */
  display: flex;
  border-bottom: #eee 10px solid;
}
.top-item {
  overflow: hidden;
  font-size: 18px;
  flex: 1;
}
.img {
  margin: 15px 10px;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  overflow: hidden;
}
.img img {
  width: 100%;
  height: 100%;
}
.item-top {
  margin-top: 15px;
}
.item-bottom {
  display: flex;
  color: #666;

  /* height: 40px; */
}
.item-bottom p {
  font-size: 14px;
  margin-top: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.item-bottom img {
  margin-top: 5px;
  width: 20px;
  height: 20px;
}
.input {
  display: none;
}
.change {
  padding-left: 8px;
}
</style>
